<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Care for design - jQuery : Plugin tytabs</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/tytabs.jquery.min.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
	$("#tabsholder").tytabs({
							tabinit:"2",
							fadespeed:"fast"
							});
	$("#tabsholder2").tytabs({
							prefixtabs:"tabz",
							prefixcontent:"contentz",
							classcontent:"tabscontent",
							tabinit:"3",
							catchget:"tab2",
							fadespeed:"normal"
							});
});
-->
</script>
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.center {
width:60%;
margin:20px auto 0 auto;
}

.marginbot {
margin-bottom:15px;
}

ul.list li {
list-style-type:none;
margin-left:20px;
}

ul.tabs {
width:100%;
overflow:hidden;
}

ul.tabs li {
list-style-type:none;
display:block;
float:left;
color:#fff;
padding:8px;
margin-right:2px;
border-bottom:2px solid #2f2f2f;
background-color:#1f5e6f;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
cursor:pointer;
}

ul.tabs li:hover {
background-color:#43b0ce;
}

ul.tabs li.current {
border-bottom:2px solid #43b0ce;
background-color:#43b0ce;
padding:8px;
}

.tabscontent {
border-top:2px solid #43b0ce;
padding:8px 0 0 0;
display:none;
width:100%;
text-align:justify;
}
-->
</style>
</head>

<body>
<div class="center">
    <p>&nbsp;</p>
    <!-- Tabs -->
    <div id="tabsholder">

        <ul class="tabs">
            <li id="tab1">Personal Data</li>
            <li id="tab2">Information Bank</li>
            <li id="tab3">Payments</li>
            <li id="tab4">Comments</li>
        </ul>
        <div class="contents marginbot">

            <div id="content1" class="tabscontent">
            
            <table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
                	<tr>
                    	<td width="20%">&nbsp;</td>
                        <td>
                                                                    
                        </td>
                        <td width="20%">&nbsp;</td>
                    </tr>          
            </table>
            
            </div>
            <div id="content2" class="tabscontent">
            <table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
                	<tr>
                    	<td width="20%">&nbsp;</td>
                        <td >
                        	<table style="border:1px solid #CCC" width="100%">
                            	<tr>
                                	<td><strong>Bank Name:</strong></td>
                                    <td>
                                    	<select>
                                        	<option>Select....</option>
                                        	<option >Bank Of America</option>
                                            <option >CityBank</option>
                                            <option >Chase</option>
                                            <option >Others</option>
                                        </select>
                                    </td>
                                    <td><input type="text" /></td>
                                </tr>
                                <tr>
                                	<td><strong>Contact Name:</strong></td>
                                    <td>John Jairo Rodriguez</td>
                                </tr>
                                <tr>
                                	<td><strong>Phones:</strong></td>
                                    <td>718 541 54 87  Ext 123 </td>
                                </tr>
                                <tr>
                                	<td>&nbsp;</td>
                                    <td>718 541 54 87  Ext 123</td>
                                </tr>
                                <tr>
                                	<td>&nbsp;</td>
                                </tr>
                                <tr>
                                	<td><strong>Loan Approved:</strong></td>
                                    <td> <input type="radio" /> SI <input type="radio" /> NO </td>
                                </tr>
                                <tr>
                                	<td><strong>Amount Approved:</strong></td>
                                    <td> <input type="text" /></td>
                                </tr>
                                <tr>
                                	<td>&nbsp;</td>
                                </tr>
                                <tr>
                                	<td colspan="2" align="center"><input type="button" value="save" /></td>
                                </tr>
                            </table>     
                            <br />
                            <table style="border:1px solid #CCC" width="100%">
                            	<tr>
                                	<td><strong>Bank Name:</strong></td>
                                    <td>
                                    	<select>
                                        	<option>Select....</option>
                                        	<option >Bank Of America</option>
                                            <option >CityBank</option>
                                            <option >Chase</option>
                                            <option >Others</option>
                                        </select>
                                    </td>
                                    <td><input type="text" /></td>
                                </tr>
                                <tr>
                                	<td><strong>Contact Name:</strong></td>
                                    <td>John Jairo Rodriguez</td>
                                </tr>
                                <tr>
                                	<td><strong>Phones:</strong></td>
                                    <td>718 541 54 87  Ext 123 </td>
                                </tr>
                                <tr>
                                	<td>&nbsp;</td>
                                    <td>718 541 54 87  Ext 123</td>
                                </tr>
                                <tr>
                                	<td>&nbsp;</td>
                                </tr>
                                <tr>
                                	<td><strong>Loan Approved:</strong></td>
                                    <td> <input type="radio" /> SI <input type="radio" /> NO </td>
                                </tr>
                                <tr>
                                	<td><strong>Amount Approved:</strong></td>
                                    <td> <input type="text" /></td>
                                </tr>
                                <tr>
                                	<td>&nbsp;</td>
                                </tr>
                                <tr>
                                	<td colspan="2" align="center"><input type="button" value="save" /></td>
                                </tr>
                            </table>                   
                        </td>
                        <td width="20%">&nbsp;</td>
                    </tr>          
            </table>
            </div>
            <div id="content3" class="tabscontent">
            <table border="0" width="100%" cellpadding="0" cellspacing="0" align="center">
                <tr><td width="30%">&nbsp;</td><td><strong>Total Fee:</strong></td><td>&nbsp;</td><td><strong style="font-size:16px">$3000.00</strong></td><td width="30%">&nbsp;</td></tr>
                <tr><td>&nbsp;</td></tr>
                 
                
                <tr>
                	<td width="30%">&nbsp;</td>
                	<td colspan="3">
                    	<table width="100%" style="border:1px solid #CCC">
                        	<tr>
                            	<td><strong>Amount: </strong></td>
                                <td><input type="text" /></td>                                
                            </tr>
                            <tr>
                            	<td><strong>Payment Type:</strong></td>
                                <td>
                                	<select>
                                     <option >Select....</option>
                                     <option >Cash....</option>
                                     <option >Credit Card....</option>
                                     <option >Checking....</option>
                                    </select>
                                </td>                                
                            </tr>
                            <tr>
                            	<td>&nbsp;</td>
                            	<td ><input type="button" value="Pay"  /></td>                               
                            </tr>
                        </table>
                    </td>
                    <td width="30%">&nbsp;</td>
                </tr>
                
                <tr><td>&nbsp;</td></tr>
                <tr>
                	<td width="30%">&nbsp;</td>
                	<td colspan="3">
                    	<table width="100%">
                        	<tr>
                            	<td><strong>Date</strong></td>
                                <td><strong>Amount</strong></td>       
                                <td><strong>Payment Type</strong></td>                          
                            </tr>
                            <tr>
                            	<td>01-01-2012</td>
                                <td>$500.00</td>    
                                <td>Credit Card</td>                            
                            </tr>
                            <tr>
                            	<td>01-01-2012</td>
                                <td>$500.00</td> 
                                <td>Checking</td>                               
                            </tr>
                            <tr>
                            	<td>01-01-2012</td>
                                <td>$500.00</td> 
                                <td>Cash</td>                               
                            </tr>
                        </table>
                    </td>
                    <td width="30%">&nbsp;</td>
                </tr>
                    
            </table>
			</div>
            <div id="content4" class="tabscontent">
				<table border="0" width="100%" cellpadding="0" cellspacing="0">
                <tr style="background-color:#CCCCCC">
                <td >                
                 f asfd asdfasf fs fsdf asdf ashdfh  akñdfjklasfkdhasjkldfhajklhsfjkla sdfklh askldha shdfjklash dfkl askfh aslkdf askjfh dklñasdflkhaskfdhlajkshdf klashfdkljahsdlfh askldfhklashfjklashfd
                </td>
                <td>&nbsp;</td>
                <td width="15%" align="right">01/23/2012 14:00</td>                
                </tr> 
                <tr style="background-color:#FFF">
                <td >                
                 f asfd asdfasf fs fsdf asdf ashdfh  akñdfjklasfkdhasjkldfhajklhsfjkla sdfklh askldha shdfjklash dfkl askfh aslkdf askjfh dklñasdflkhaskfdhlajkshdf klashfdkljahsdlfh askldfhklashfjklashfd
                </td>
                <td>&nbsp;</td>
                <td width="15%" align="right">01/23/2012 14:00</td> 
                </tr>  
                <tr style="background-color:#CCCCCC">
                <td >                
                 f asfd asdfasf fs fsdf asdf ashdfh  akñdfjklasfkdhasjkldfhajklhsfjkla sdfklh askldha shdfjklash dfkl askfh aslkdf askjfh dklñasdflkhaskfdhlajkshdf klashfdkljahsdlfh askldfhklashfjklashfd
                </td>
                <td>&nbsp;</td>
                <td width="15%" align="right">01/23/2012 14:00</td> 
                </tr>    
                <tr><td>&nbsp;</td></tr>
                <tr>
                <td colspan="3">
                <textarea rows="5" cols="150"></textarea><br /> <input type="button" value="Add Comment" />     
                </td>
                </tr>   
                </table>
            
            
           	</div>
        </div>
    </div>
    <!-- /Tabs -->
    <!-- Tabs2 -->
    
    <!-- /Tabs2 -->
</div>
</body>
</html>
